<div id="app">
  <!-- Vue实例 -->
  <h2>{{product}} are in stock.</h2>

  <!-- 条件渲染（v-else、v-else-if自行扩充） -->
  <h3 v-if="seen">if:因为seen等于{{seen}}所以显示</h3>
  <h3 v-else>else:因为seen等于{{seen}}所以显示</h3>

  <!-- 循环渲染 -->
  <ul>
    <!-- a[i] -->
    <li v-for="(item , index) in productList" :key="index">
      {{item.name}} 剩余 {{item.num}}
      <!-- 监听事件 -->
      <button v-on:click="item.num++">Add</button>
    </li>
  </ul>

  <!-- 双向绑定（input或textarea或单选多选...) -->
  <input type="text" v-model="product" />

  <!-- 监听事件 -->
  <button v-on:click="reset">清空</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      product: 'Boots',
      seen: false,
      productList: [{
          name: "Boots",
          num: 1
        },
        {
          name: "Jacket",
          num: 2
        },
        {
          name: "Hiking Socks",
          num: 3
        }
      ]
    },
    methods: {
      reset() {
        this.product = ""
      }
    },
    created() {
      console.log('页面创建')
    }
  })
</script>